<script setup>
import {ref, inject, computed} from 'vue'
import {ElCarousel, ElCarouselItem, ElTooltip, ElTag} from 'element-plus'

const userinfo=inject('userinfo')
const organization=defineModel('organization')

const tags=computed(()=>{
    var tmp=[]
    organization.value?.level2s.map(level2=>{
        tmp.push(`${level2.level1.name} | ${level2.name}`)
    })
    return tmp
})

const organization_type=computed(()=>{
    switch(organization.value.organization_type){
        case 'GOVERNMENT':
            return '政府部门'
        case 'RESEARCH':
            return '科研院所'
        case 'INSPECTION':
            return '检测认证'
        case 'ENTERPRISE':
            return '企业'
        case 'APPLICATION':
            return '应用单位'
        case 'FINANCIAL':
            return '金融机构'
        default:
            return '未知类别'
    }
})

const show_join=computed(()=>{
    if(userinfo.value){
        if(userinfo.value.organization?.id!=organization.value.id){
            return true
        }
    }
    return false
})
</script>

<template>
    <div class="main">
        <div class="photos">
            <div v-if="organization?.photos.length==0">
                <el-image src="/img/home.jpg"/>
            </div>
            <el-carousel v-else style="width:100%; height:auto;" autoplay>
                <el-carousel-item v-for="photo in organization.photos" :key="photo">
                    <div style="display:flex; justify-content: center;">
                        <el-image fit="fill" :src="'/minio/organization/'+photo"/>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="title">{{ organization.name }}</div>
        <div class="sub-title">
            <div class="sub-title-item">
                <el-tooltip placement="bottom" content="机构类别">
                    <el-image style="width:26px; height:26px; margin:0 5px;" src="/img/类别.png"/>
                </el-tooltip>
                {{ organization_type }}
            </div>
            <div class="sub-title-item">
                <el-tooltip placement="bottom" content="机构所属领域">
                    <el-image style="width:26px; height:26px; margin:0 5px;" src="/img/分类.png"/>
                </el-tooltip>
                <el-tag round v-for="tag in tags" style="color:black; background-color:var(--el-color-primary-light-7); font-size:15px; font-weight:bolder;">
                    {{ tag }}
                </el-tag>
            </div>
            <div class="sub-title-item">
                <el-tooltip placement="bottom" content="机构地址">
                    <el-image style="width:26px; height:26px; margin:0 5px;" src="/img/位置.png"/>
                </el-tooltip>
                {{ organization.address }}
            </div>
            <div class="sub-title-item" v-if="userinfo&&userinfo?.organization?.id!=organization.id">
                <el-button type="primary" >申请加入</el-button>
            </div>
            <div class="sub-title-item" v-if="userinfo?.organization?.id==organization.id">
                <el-button type="danger" >退出机构</el-button>
            </div>
        </div>
        <div class="introduce">{{ organization.introduce }}</div>
    </div>
</template>

<style lang="scss" scoped>
.main{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.title{
    display:flex;
    justify-content: center;
    font-size:larger;
    font-weight:bolder;
    margin:10px 0;
}
.sub-title{
    width:100%;
    padding:5px 0;
    margin-bottom:10px;
    background-color:var(--el-color-info-light-9);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
}
.sub-title-item{
    display:flex;
    align-items:center;
    font-weight:bolder;
    font-size:15px;
    margin:0 10px;
}
.photos{
    width:100%;
    display:flex;
    justify-content: center;
}
.introduce{
    width:100%;
    white-space:pre-line;
}
</style>